import React, { useEffect, useState } from "react";
import './index.css'
import { Collapse, Rate, Button, TextArea, Form, Input } from 'antd-mobile'
import logo from '../../assets/return_visit_imgs/logo.png';
import successImg from '../../assets/return_visit_imgs/success.png';
import { addTRecord, getTRecords } from "../../utils/auth_access_util";
import { getRecordId } from "../../utils/api";


export default function Home() {

    const [isVisible, setIsVisible] = useState(false);
    // const [recordId, setRecordId] = useState("");

    const [orvData, setOrvData] = useState({
        companyName: "", //客户名称
        handler: [], //工单处理人
        suggestion: "", //反馈建议
        fileList: [],
        feedbackContent: "",
        overallEvaluation: null,
        skillLevels: null,
        serviceAttitude: null,
        responseSpeed: null,
        deliveryDateEvaluation: null,
        productEvaluation: null,
        usageEvaluation: null,
        trainEvaluation: null,
        //对应显示的中文
        overallEvaluationValue: null,
        skillLevelsValue: null,
        serviceAttitudeValue: null,
        responseSpeedValue: null,
        deliveryDateEvaluationValue: null,
        productEvaluationValue: null,
        usageEvaluationValue: null,
        trainEvaluationValue: null,
    });

    //获取记录id
    const fetchGetRecordId = async () => {
        try {
            const response = await getRecordId();
            if (response.status == 200) {
                console.log("记录id", response.data[0].fields.记录id);
                const newRecordId = response.data[0].fields.记录id;
                // setRecordId(newRecordId);
                return newRecordId;
            }
        } catch (err) {
            console.error(err);
            return "";
        }
    };

    //获取记录详情
    async function fetchRecordDetail(id) {
        const res = await getTRecords([id]);
        const records = res.data.data.records;
        console.log("获取到的目标记录", records);
        setOrvData(prev => ({
            ...prev,
            companyName: records[0].fields.客户名称[0].text,
            handler: records[0].fields.处理人,
        }));
    }

    useEffect(() => {
        // const queryParams = new URLSearchParams(window.location.search);
        // const record_id = queryParams.get('q'); // 获取名为 'q' 的查询参数值
        // console.log(record_id); // 输出: rech1LrIJg

        const runRequests = async () => {
            const id = await fetchGetRecordId();
            if (id) {
                await fetchRecordDetail(id);
            }
        };
        runRequests();
    }, []);

    //星星回调
    const onChangeOverAll = (value) => {
        console.log(value);
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.overallEvaluationValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    overallEvaluationValue: "非常差",
                    overallEvaluation: 1,
                }));
                break;
            case 2:
                // orvData.overallEvaluationValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    overallEvaluationValue: "差",
                    overallEvaluation: 2,
                }));
                break;
            case 3:
                // orvData.overallEvaluationValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    overallEvaluationValue: "一般",
                    overallEvaluation: 3,
                }));
                break;
            case 4:
                // orvData.overallEvaluationValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    overallEvaluationValue: "好",
                    overallEvaluation: 4,
                }));
                break;
            case 5:
                // orvData.overallEvaluationValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    overallEvaluationValue: "非常好",
                    overallEvaluation: 5,
                }));
                break;
        }
    }
    const onChangeSkill = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.skillLevelsValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    skillLevelsValue: "非常差",
                    skillLevels: 1,
                }));
                break;
            case 2:
                // orvData.skillLevelsValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    skillLevelsValue: "差",
                    skillLevels: 2,
                }));
                break;
            case 3:
                // orvData.skillLevelsValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    skillLevelsValue: "一般",
                    skillLevels: 3
                }));
                break;
            case 4:
                // orvData.skillLevelsValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    skillLevelsValue: "好",
                    skillLevels: 4
                }));
                break;
            case 5:
                // orvData.skillLevelsValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    skillLevelsValue: "非常好",
                    skillLevels: 5
                }));
                break;
        }
    }
    const onChangeService = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.serviceAttitudeValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    serviceAttitudeValue: "非常差",
                    serviceAttitude: 1,
                }));
                break;
            case 2:
                // orvData.serviceAttitudeValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    serviceAttitudeValue: "差",
                    serviceAttitude: 2,
                }));
                break;
            case 3:
                // orvData.serviceAttitudeValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    serviceAttitudeValue: "一般",
                    serviceAttitude: 3
                }));
                break;
            case 4:
                // orvData.serviceAttitudeValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    serviceAttitudeValue: "好",
                    serviceAttitude: 4
                }));
                break;
            case 5:
                // orvData.serviceAttitudeValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    serviceAttitudeValue: "非常好",
                    serviceAttitude: 5
                }));
                break;
        }
    }
    const onChangeRespond = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.responseSpeedValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    responseSpeedValue: "非常差",
                    responseSpeed: 1
                }));
                break;
            case 2:
                // orvData.responseSpeedValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    responseSpeedValue: "差",
                    responseSpeed: 2
                }));
                break;
            case 3:
                // orvData.responseSpeedValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    responseSpeedValue: "一般",
                    responseSpeed: 3
                }));
                break;
            case 4:
                // orvData.responseSpeedValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    responseSpeedValue: "好",
                    responseSpeed: 4
                }));
                break;
            case 5:
                // orvData.responseSpeedValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    responseSpeedValue: "非常好",
                    responseSpeed: 5
                }));
                break;
        }
    }
    const onChangeProduct = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.productEvaluationValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    productEvaluationValue: "非常差",
                    productEvaluation: 1,
                }));
                break;
            case 2:
                // orvData.productEvaluationValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    productEvaluationValue: "差",
                    productEvaluation: 2,
                }));
                break;
            case 3:
                // orvData.productEvaluationValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    productEvaluationValue: "一般",
                    productEvaluation: 3
                }));
                break;
            case 4:
                // orvData.productEvaluationValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    productEvaluationValue: "好",
                    productEvaluation: 4
                }));
                break;
            case 5:
                // orvData.productEvaluationValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    productEvaluationValue: "非常好",
                    productEvaluation: 5
                }));
                break;
        }
    }
    const onChangeUsage = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.usageEvaluationValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    usageEvaluationValue: "非常差",
                    usageEvaluation: 1,
                }));
                break;
            case 2:
                // orvData.usageEvaluationValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    usageEvaluationValue: "差",
                    usageEvaluation: 2
                }));
                break;
            case 3:
                // orvData.usageEvaluationValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    usageEvaluationValue: "一般",
                    usageEvaluation: 3
                }));
                break;
            case 4:
                // orvData.usageEvaluationValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    usageEvaluationValue: "好",
                    usageEvaluation: 4
                }));
                break;
            case 5:
                // orvData.usageEvaluationValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    usageEvaluationValue: "非常好",
                    usageEvaluation: 5
                }));
                break;
        }
    }
    const onChangeDelivery = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.deliveryDateEvaluationValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    deliveryDateEvaluationValue: "非常差",
                    deliveryDateEvaluation: 1,
                }));
                break;
            case 2:
                // orvData.deliveryDateEvaluationValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    deliveryDateEvaluationValue: "差",
                    deliveryDateEvaluation: 2,
                }));
                break;
            case 3:
                // orvData.deliveryDateEvaluationValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    deliveryDateEvaluationValue: "一般",
                    deliveryDateEvaluation: 3,
                }));
                break;
            case 4:
                // orvData.deliveryDateEvaluationValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    deliveryDateEvaluationValue: "好",
                    deliveryDateEvaluation: 4,
                }));
                break;
            case 5:
                // orvData.deliveryDateEvaluationValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    deliveryDateEvaluationValue: "非常好",
                    deliveryDateEvaluation: 4,
                }));
                break;
        }
    }
    const onChangeTrain = (value) => {
        switch (value) { //1星非常差，2星差，3星一般，4星好，5星非常好
            case 1:
                // orvData.trainEvaluationValue = "非常差";
                setOrvData(prev => ({
                    ...prev,
                    trainEvaluationValue: "非常差",
                    trainEvaluation: 1,
                }));
                break;
            case 2:
                // orvData.trainEvaluationValue = "差";
                setOrvData(prev => ({
                    ...prev,
                    trainEvaluationValue: "差",
                    trainEvaluation: 2,
                }));
                break;
            case 3:
                // orvData.trainEvaluationValue = "一般";
                setOrvData(prev => ({
                    ...prev,
                    trainEvaluationValue: "一般",
                    trainEvaluation: 3
                }));
                break;
            case 4:
                // orvData.trainEvaluationValue = "好";
                setOrvData(prev => ({
                    ...prev,
                    trainEvaluationValue: "好",
                    trainEvaluation: 4
                }));
                break;
            case 5:
                // orvData.trainEvaluationValue = "非常好";
                setOrvData(prev => ({
                    ...prev,
                    trainEvaluationValue: "非常好",
                    trainEvaluation: 5
                }));
                break;
        }
    }
    const handleFormItemChange = (key, value) => {
        setOrvData(prev => ({
            ...prev,
            [key]: value
        }));
    };
    const addForm = async () => {
        setIsVisible(true);
        await addTRecord(orvData);
    }

    return (
        <div className="return-visit-container">

            <div className="header">
                <div className="company-infos">
                    <div className="logo">
                        <img src={logo} alt="公司logo" />
                    </div>
                    <div className="name">劲拓股份</div>
                </div>
                <div className="company-tips">
                    <div>亲爱的顾客：</div>
                    {!isVisible && <div>
                        <div>您好！首先感谢您选择了劲拓股份的产品！</div>
                        <div>
                            为了了解本次服务的情况，现请您对本次服务进行一个评价，您的宝贵意见和建议将有助于我们持续的改善和进步。感谢!
                        </div>
                    </div>}
                    {isVisible && <div className="end-tips">
                        <p>您好！再次感谢您选择了劲拓股份的产品！</p>
                        <p>
                            您的反馈我们已经收到，非常感谢您的建议。
                            我们会认真对待每一个建议，不断优化服务，为您带来更好的体验。
                        </p>
                    </div>}

                </div>
            </div>

            {/* 主体内容开始 */}
            {!isVisible && <div className="content">

                <TextArea
                    value={orvData.suggestion}
                    onChange={value => handleFormItemChange('suggestion', value)}
                    className="evaluate"
                    placeholder='请填写反馈或者建议'
                    autoSize={{ minRows: 3, maxRows: 5 }}
                />

                {/* <Form
                    layout='horizontal'
                >
                    <Form.Item
                        name='companyName'
                        label='客户名称'
                    >
                        <Input value={orvData.companyName} onChange={value => handleFormItemChange('companyName', value)} placeholder='请输入客户名称' />
                    </Form.Item>
                    <Form.Item
                        name='handler'
                        label='工单处理人'
                    >
                        <Input value={orvData.handler} onChange={value => handleFormItemChange('handler', value)} placeholder='请输入工单处理人名称' />
                    </Form.Item>
                </Form> */}

                <Collapse defaultActiveKey={['1', '2']}>
                    <Collapse.Panel key='1' title='服务评价'>
                        <div className="collaps-row">
                            <span className="rate-title">整体评价</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeOverAll} allowClear={true} />
                            <span className="rate-desc">{orvData.overallEvaluationValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">技能水平</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeSkill} allowClear={true} />
                            <span className="rate-desc">{orvData.skillLevelsValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">服务态度</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeService} allowClear={true} />
                            <span className="rate-desc">{orvData.serviceAttitudeValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">响应速度</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeRespond} allowClear={true} />
                            <span className="rate-desc">{orvData.responseSpeedValue}</span>
                        </div>
                    </Collapse.Panel>
                    <Collapse.Panel key='2' title='产品评价'>
                        <div className="collaps-row">
                            <span className="rate-title">产品评价</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeProduct} allowClear={true} />
                            <span className="rate-desc">{orvData.productEvaluationValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">使用评价</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeUsage} allowClear={true} />
                            <span className="rate-desc">{orvData.usageEvaluationValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">交期评价</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeDelivery} allowClear={true} />
                            <span className="rate-desc">{orvData.deliveryDateEvaluationValue}</span>
                        </div>
                        <div className="collaps-row">
                            <span className="rate-title">培训评价</span>
                            <Rate style={{
                                '--star-size': '30px',
                                '--active-color': '#ff3141',
                            }} onChange={onChangeTrain} allowClear={true} />
                            <span className="rate-desc">{orvData.trainEvaluationValue}</span>
                        </div>
                    </Collapse.Panel>
                </Collapse>
            </div>}
            {/* 主体内容结束 */}

            {!isVisible && <div className="submit" onClick={addForm}>
                <Button block color='danger' size='large' style={{ width: '95%' }}>
                    提交
                </Button>
            </div>}

            {isVisible && <div className="end">
                <img src={successImg} alt="提交成功" />
                <span>提交成功!</span>
                <span>感谢您的配合!</span>
            </div>}

        </div >
    )

}
